<template>
    <div class="listnav">
        <div class="listnav-title">
            <span class="title-text">93源码网 / 背景图库</span>
        </div>
        <div class="listnav-main">
            <div class="main-top">
                <img src="../assets/img/icon/list-tt-bg.png" />
            </div>
            <div class="main-content">
                <div class="line" v-for="(item,index) of list" :key="index">
                    <div class="left">
                        <div class="line-type">{{item.title}}：</div>
                    </div>
                    <div class="right">
                        <div class="type-box">
                            <div class="line-item" v-for="(nav_item,ind) of item.sub_titles" :key="ind" :class="{'active':nav_item.active_flag}">
                                {{nav_item.title}}
                                <img class="new-icon" v-show="nav_item.new_flag" src="../assets/img/icon/new-icon.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
        }
    },
    props:{
        list:{
            type:Array,
            default:[]
        }
    }
};
</script>

<style lang="less" scoped>
.listnav {
    font-size: @main-font-size;
    color: @main-font-color;
    .listnav-title {
        margin-bottom:30px;
        .title-text {
        }
    }
    .listnav-main {
        background: #ffffff;
        border-radius: 6px;
        overflow: hidden;
        .main-top {
            img {
                width: 100%;
                height: 100%;
            }
        }
        .main-content {
            .line {
                font-size: 0;
                .left {
                    width: 100px;
                    display: inline-block;
                    font-size: @main-font-size;
                    .line-type {
                        display: inline-block;
                        height: 32px;
                        padding: 0 12px;
                        line-height: 32px;
                        margin: 15px 0 15px 20px;
                    }
                }
                .right {
                    font-size: @main-font-size;
                    width: calc(100% - 120px);
                    display: inline-block;
                    .type-box {
                        display: flex;
                        flex-wrap: wrap;
                        .line-item {
                            margin: 15px 8px;
                            position: relative;
                            display: inline-block;
                            height: 32px;
                            line-height: 32px;
                            padding: 0 12px;
                            border-radius: 6px;
                            cursor: pointer;
                            .new-icon {
                                width: 29px;
                                height: 16px;
                                position: absolute;
                                top: -6px;
                                right: -12px;
                            }
                        }
                        .line-item.active,
                        .line-item:hover {
                            background: #fa4633;
                            color: #ffffff;
                        }
                    }
                }
            }
        }
    }
}
</style>